<template>
  <view class="lianliankan">
    <view class="time">
      <text>计时：</text>
      <text>{{ minuteNumber }}:{{ secondNumber }}</text>
    </view>
    <view class="content">
      <view class="box">
        <view class="game english" v-if="englishWordList.length > 0">
          <view
            class="game_container"
            v-for="(item, index) in englishWordList"
            :key="index"
          >
            <view
              class="game_content"
              :class="{
                active: currentEnglishIndex === index,
                animate__animated:
                  currentEnglishIndex === index || item.isCorrect,
                animate__faster: currentEnglishIndex === index,
                animate__rubberBand: currentEnglishIndex === index,
                animate__fadeOut: item.isCorrect,
              }"
              @click="chooseEnglish(item, index)"
            >
              <view class="game_span">
                <text>{{ item.word }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="game chinese" v-if="chineseWordList.length > 0">
          <view
            class="game_container"
            v-for="(item, index) in chineseWordList"
            :key="index"
          >
            <view
              class="game_content"
              :class="{
                active: currentChineseIndex === index,
                animate__animated:
                  currentChineseIndex === index || item.isCorrect,
                animate__faster: currentChineseIndex === index,
                animate__rubberBand: currentChineseIndex === index,
                animate__fadeOut: item.isCorrect,
              }"
              @click="chooseChinese(item, index)"
            >
              <view class="game_span">
                <text>{{ item.wordParaphrase }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="show1"
      :zoom="false"
      mode="center"
      width="1200rpx"
      height="1200rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask1">
        <view class="mask1_content">
          <view class="mask1_title">恭喜过关！</view>
          <view class="mask1_text">过关越多奖励越多哦！</view>
          <view class="mask1_btn" @click="endGame()">
            <text>结束闯关</text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="custom-popup"
      v-model="show2"
      :zoom="false"
      mode="center"
      width="590rpx"
      height="738rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask2">
        <view class="mask2_content">
          <view class="mask2_title">挑战失败！</view>
          <view class="mask2_btn" @click="endGame()">
            <text>结束闯关</text>
          </view>
          <view class="mask2_text" @click="practiceAgain()">重玩本局</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { arrayRandomly } from "@/libs/tools";
export default {
  props: {
    wordList: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    this.init();
  },
  data() {
    return {
      englishWordList: [],
      chineseWordList: [],
      wordNumber: 0,
      clickCount: 0,
      clickCorrect: 0,
      clickError: 0,
      accuracy: 0,
      countdown: 0,
      goldNum: 0,
      minute: 3,
      minuteNumber: "03",
      second: 0,
      secondNumber: "00",
      timerId: null,
      currentEnglishIndex: -1,
      currentChineseIndex: -1,
      currentEnglishId: 0,
      currentChineseId: 0,
      audio: null,
      innerAudioContext: null,
      isPlaying: false,
      isShowPopup: false,
      show1: false,
      show2: false,
    };
  },
  methods: {
    init() {
      let list = JSON.parse(JSON.stringify(this.wordList));
      this.englishWordList = list;
      this.chineseWordList = arrayRandomly([...list]);
      this.wordNumber = list.length;
      this.timer();
      this.playAudio();
    },
    initData() {
      this.clickCount = 0;
      this.clickCorrect = 0;
      this.clickError = 0;
      this.accuracy = 0;
      this.goldNum = 0;
      this.countdown = 0;
      this.minute = 3;
      this.minuteNumber = "03";
      this.second = 0;
      this.secondNumber = "00";
      this.currentEnglishIndex = -1;
      this.currentChineseIndex = -1;
      if (this.timerId) {
        clearInterval(this.timerId);
      }
    },
    playAudio() {
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.loop = true;
      this.innerAudioContext.src =
        "https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/audio/bg_music.mp3";
      this.innerAudioContext.onPlay(() => {
        console.log("开始播放");
      });
      this.innerAudioContext.onError((res) => {
        console.log(res.errMsg);
        console.log(res.errCode);
      });
    },
    stopAudio() {
      this.innerAudioContext.stop();
    },
    chooseEnglish(item, index) {
      this.clickCount++;
      this.currentEnglishIndex = index;
      this.currentEnglishId = item.id;
      if (this.currentEnglishId !== 0 && this.currentChineseId !== 0) {
        this.checkRightAndWrong(item, 1);
      }
    },
    chooseChinese(item, index) {
      this.clickCount++;
      this.currentChineseIndex = index;
      this.currentChineseId = item.id;
      if (this.currentChineseId !== 0 && this.currentEnglishId !== 0) {
        this.checkRightAndWrong(item, 2);
      }
    },
    checkRightAndWrong(item, type) {
      if (this.currentEnglishId === this.currentChineseId) {
        this.$emit("save", true, this.currentEnglishId);
        this.currentEnglishId = 0;
        this.currentChineseId = 0;
        this.$set(item, "isCorrect", true);
        if (type === 1) {
          this.$set(
            this.chineseWordList[this.currentChineseIndex],
            "isCorrect",
            true
          );
        } else if (type === 2) {
          this.$set(
            this.englishWordList[this.currentEnglishIndex],
            "isCorrect",
            true
          );
        }
        this.clickCorrect++;
        this.play(true);
        this.isShowPopup = true;
        setTimeout(() => {
          this.isShowPopup = false;
        }, 500);
        if (this.clickCorrect === this.wordNumber) {
          this.gameOver();
        }
      } else {
        this.$emit(
          "save",
          false,
          type === 1 ? this.currentChineseId : this.currentEnglishId
        );
        this.currentEnglishId = 0;
        this.currentChineseId = 0;
        this.currentEnglishIndex = -1;
        this.currentChineseIndex = -1;
        this.clickError++;
        this.play(false);
      }
    },
    gameOver() {
      clearInterval(this.timerId);
      if (this.clickCount > 0) {
        this.accuracy = (
          (((this.clickCorrect * 2) / this.clickCount) * 10000) /
          100
        ).toFixed(2);
      }
      if (this.accuracy === "100.00") {
        this.show1 = true;
        this.$emit("complete");
      } else {
        this.show2 = true;
      }
    },
    play(flag) {
      if (this.isPlaying) return;
      this.audio = uni.createInnerAudioContext();
      if (flag) {
        this.audio.src =
          "https://pc.abczxs.com/edcSystem/web/web2/images/xaiochuyinxiao.mp3";
      } else {
        this.audio.src =
          "https://pc.abczxs.com/edcSystem/web/web2/images/false.mp3";
      }
      this.audio.play();
      this.audio.onEnded(() => {
        this.isPlaying = false;
        this.innerAudioContext.play();
      });
      this.isPlaying = true;
    },
    timer() {
      this.timerId = setInterval(() => {
        this.second--;
        if (this.second < 0) {
          this.second = 59;
          this.minute--;
        }
        if (this.minute < 0) {
          this.gameOver();
          return;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
        this.countdown++;
      }, 1000);
    },
    practiceAgain() {
      this.show2 = false;
      this.initData();
      this.init();
    },
    endGame() {
      this.$emit("end");
    },
  },
};
</script>
<style scoped lang="scss">
@import "./LianLianKanNew";
</style>
